<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
</head>

<body>
    <header class="aui-bar aui-bar-nav" style="background-color: #03a9f4;position:fixed;" id="header">
        <a class="aui-pull-left aui-btn" tapmode onclick="closeWin();">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title" id="title">
            设备管理
        </div>
    </header>

    <div class="aui-content aui-margin-b-15" style="margin-top:50px;">
        <div class="aui-searchbar" id="search" style="position: relative;">
            <div class="aui-searchbar-input aui-border-radius">
                <i class="aui-iconfont aui-icon-search"></i>
                <div class="aui-searchbar-input">
                    <form action="javascript:doSearch();">
                        <input type="search" placeholder="备件编码、备件名称" id="equipCodeOrName">
                    </form>
                </div>
            </div>
            <div class="aui-btn aui-btn-primary" style="margin-right: 0.5rem;background-color: #03a9f4"
                onclick="doSearch()">搜索</div>
        </div>
        <div class="aui-content" id="divHtml" style="margin-top: 10px;">

        </div>
        <footer class="aui-bar aui-bar-tab ui-selectee">
            <div class="aui-btn aui-btn-info aui-btn-block" onclick="save()">带回</div>
        </footer>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../script/public.js"></script>
<script type="text/javascript" src="../script/mqttws31.js"></script>
<script type="text/javascript">

    var list = [];
    // 关键：用sysid作为键存储数量（统一唯一值）
    let counts = {};

    // 初始化（APICloud环境触发）
    apiready = function () {
        // 事件委托：处理加减按钮点击（核心：传sysid）
        document.getElementById('divHtml').addEventListener('click', function (e) {
            // 处理减号按钮（通过样式特征识别按钮）
            if (e.target.textContent === '-' && e.target.style.borderRadius === '50%') {
                // 从相邻输入框获取sysid（输入框的data-sysid属性）
                const sysid = e.target.nextElementSibling.getAttribute('data-sysid');
                if (sysid) {
                    minusCount(sysid); // 传sysid
                }
            }
            // 处理加号按钮
            else if (e.target.textContent === '+' && e.target.style.borderRadius === '50%') {
                // 从相邻输入框获取sysid
                const sysid = e.target.previousElementSibling.getAttribute('data-sysid');
                if (sysid) {
                    addCount(sysid); // 传sysid
                }
            }
        });

        // 初始查询数据
        doSearch();
    }

    // 查询数据（后台获取list）
    function doSearch() {
        var equipCodeOrName = $("equipCodeOrName").val()
        console.log(equipCodeOrName);
        var un = localStorage.getItem('un');
        var serverUrl = localStorage.getItem('serverUrl');
        var url = serverUrl + "/app/getSpareParts";
        var data = {
            values: {
                un: un,
                equipCodeOrName: equipCodeOrName,
                equipCode: api.pageParam.equipCode
            }
        };

        api.ajax({
            url: url,
            method: 'post',
            dataType: 'json',
            timeout: 30,
            returnAll: false,
            data: data
        }, function (ret, err) {
            if (ret) {
                var data = JSON.stringify(ret);
                var myobj = eval("(" + data + ")");

                if (myobj.code == "0") {
                    list = eval(myobj.list);

                    // 关键：用sysid初始化数量（每个备件初始为0）
                    counts = {}; // 清空旧数据
                    list.forEach(item => {
                        // 确保sysid存在（避免空值异常）
                        if (item.sysid) {
                            counts[item.sysid] = 0;
                        }
                    });

                    // 生成页面HTML
                    creatHtml();

                } else if (myobj.code == "1") {
                    api.toast({
                        msg: myobj.message,
                        duration: 3000
                    });
                }
            } else {
                api.toast({
                    msg: JSON.stringify(err),
                    duration: 3000
                });
            }
        });
    }

    // 减少数量（参数：sysid）
    function minusCount(sysid) {
        // 确保sysid在counts中存在，且数量>0
        if (counts[sysid] !== undefined && counts[sysid] > 0) {
            counts[sysid]--;
            // 关键：通过data-sysid找到输入框（统一唯一值）
            const inputEl = document.querySelector(`input[data-sysid="${sysid.replace(/"/g, '\\"')}"]`);
            if (inputEl) {
                inputEl.value = counts[sysid]; // 更新输入框显示
            }
        }
    }

    // 增加数量（参数：sysid）
    function addCount(sysid) {

        // 确保sysid在counts中存在
        if (counts[sysid] !== undefined) {
            counts[sysid]++;
            // 关键：通过data-sysid找到输入框（处理特殊字符转义）
            const inputEl = document.querySelector(`input[data-sysid="${sysid.replace(/"/g, '\\"')}"]`);
            if (inputEl) {
                inputEl.value = counts[sysid]; // 更新输入框显示
            }
        }
    }

    // 生成页面HTML（所有标识统一用sysid）
    function creatHtml() {
        var str = '';
        const divHtml = document.getElementById("divHtml");
        divHtml.innerHTML = ""; // 清空旧内容

        for (let i = 0; i < list.length; i++) {
            const item = list[i];
            // 跳过无sysid的项（避免异常）
            if (!item.sysid) continue;

            str += `
                <div style='margin-top: 10px; height: 120px;color: grey;background-color:white;border-radius:8px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);overflow:hidden;'>
                    <!-- 左侧图片区域 -->
                    <div style='width: 30%;height: 100%;float: left;margin-right: 1%'>
                        ${item.ext12 ?
                    `<img src='${item.ext12}' style='width: 100%; height: 100%;object-fit: cover;'>`
                    :
                    `<div class='aui-text-center' style='color: #fff;font-size: 15px;height: 100%;padding-top: 45%;background-color:#ccc;'>
                                    <span>未上传图片</span>
                                </div>`
                }
                    </div>

                    <!-- 右侧信息区域 -->
                    <div style='width: 67%;height: 100%;float: left;font-size:12px;text-align: left;padding-left: 2%;box-sizing: border-box;'>
                        <!-- 名称 + 复选框（复选框用data-sysid标识） -->
                        <div style='font-weight: bold;font-size:14px;color: black;margin-top:10px;display: flex;justify-content: space-between;align-items: center;'>
                            <span>${item.name || '未命名设备'}</span>
                            <input type='checkbox' check-sysid='${item.sysid}' style='transform: scale(1.5);margin: 0 10px 0 0;cursor: pointer;'>
                        </div>

                        <!-- 备件信息（保留原code显示，不影响唯一值） -->
                        <div>备件编码：${item.code || ''}</div>
                        
                        

                        <!-- 数量控制区域（所有标识用sysid） -->
                        <div style='height:30px;display: flex;align-items: center;justify-content: flex-end;margin-top:5px;'>
                            <!-- 减号按钮（无onclick，靠事件委托） -->
                            <div style='background:#03a9f4;color:#fff;height:20px;width:20px;font-size:16px;line-height:18px;text-align:center;border-radius:50%;cursor:pointer;'>-</div>
                            <!-- 输入框：用data-sysid标识（关键） -->
                            <input type='text' data-sysid='${item.sysid}' value='0' style='width:30px;height:20px;text-align:center;margin:0 5px;' readonly>
                            <!-- 加号按钮（无onclick，靠事件委托） -->
                            <div style='background:#03a9f4;color:#fff;height:20px;width:20px;font-size:16px;line-height:18px;text-align:center;border-radius:50%;cursor:pointer;'>+</div>
                        </div>
                    </div>
                </div>
            `;
        }

        divHtml.innerHTML = str;
    }

    // 提交选中项（基于sysid匹配数据）
    function save() {
        const selectedItems = [];

        // 1. 获取所有选中的复选框（用check-sysid标识）
        const checkboxes = document.querySelectorAll('input[type="checkbox"][check-sysid]:checked');
        if (checkboxes.length === 0) {
            api.toast({ msg: "请先选择备件", duration: 3000 });
            return;
        }

        // 2. 遍历选中项，收集sysid和数量
        for (let i = 0; i < checkboxes.length; i++) {
            const checkbox = checkboxes[i];
            const sysid = checkbox.getAttribute('check-sysid');
            const quantity = counts[sysid] || 0; // 从counts中获取对应数量

            // 只提交数量>0的项
            if (quantity > 0) {
                // 3. 通过sysid匹配完整备件信息
                const item = list.find(equip => equip.sysid === sysid);
                if (item) {
                    selectedItems.push({
                        sysid: sysid,       // 提交sysid（后台唯一标识）
                        code: item.code,    // 保留原code（如需显示）
                        name: item.name,    // 设备名称
                        quantity: quantity,  // 选中数量
                        ext12:item.ext12//图片
                    });
                }
            } else {
                const item = list.find(equip => equip.sysid === sysid);
                api.toast({ msg: "请为选中的备件【" + item.code + "】设置数量（需大于0）", duration: 3000 });
                return;
            }
        };
        // api.sendEvent({
        //     name: 'sparePartsSelected', // 自定义事件名（原页面需用相同名称接收）
        //     extra: {
        //         selectedItems: JSON.stringify(selectedItems) // 数据转JSON字符串（避免类型丢失）
        //     }
        // });
        api.closeWin({
            delay: 500 // 延迟关闭，确保数据发送完成
        });
        api.execScript({
            name: api.pageParam.name,
            script: 'sparePartsSelected(' + JSON.stringify(selectedItems) + ')'
        });

        
    }

    // 返回上一页（APICloud方法）
    function closeWin() {
        api.closeWin({});
    }
</script>

</html>